<template>
  <div>
    <h2>子组件</h2>
    <p>老子给的钱：{{ money }}</p>
    <p>{{ msg }}</p>
    <hr />
    <button @click="change">修改 money</button>
  </div>

  <hr />
  <GrandSon />
</template>

<script setup>
import GrandSon from './grandSon.vue'
// 父传子
// 2. 接收父组件传递的数据=> 通过defineProps全局宏函数
const props = defineProps({
  money: {
    type: Number,
    default: 0
  },
  msg: {
    type: String,
    default: ''
  }
})
console.log('js 中获取 props:', props)

// 子传父=> 1. 通过defineEmits全局宏函数，定义自定义事件名字
const emit = defineEmits(['change-money'])
const change = () => {
  console.log(this)
  // !注意：vue3 setup 函数中无法获取 this
  // emit ===等价于 this.$emit
  emit('change-money', 8e6)
}
</script>

<style lang="scss" scoped></style>
